
<template>
    <div class="sidebar">
        <div
            v-for="(item,index) in routerList"
            :key="index"
            class="sider-bar"
            :class="{active:$route.name==item.name}"
            @click="onSwith(item)"
        >
            <span class="title">{{item.title}}</span>
            <i class="el-icon-arrow-right bar-icon"></i>
        </div>
    </div>
</template>
<script>
export default {
    name: "sidebar",
    computed: {
        
    },
    data() {
        return {
            activeIndex:0,
            routerList:[
                {title:'个人信息',path:'/profile',name:'profile'},
                {title:'我的收藏',path:'/profile/collection',name:'collection'},
                {title:'我的笔记',path:'/profile/note',name:'note'},
                {title:'阅读历史',path:'/profile/history',name:'history'},
                {title:'我的书签',path:'/profile/bookMark',name:'bookMark'},
                {title:'购买记录',path:'/profile/record',name:'record'},
                {title:'我的发票',path:'/profile/invoice',name:'invoice'},
                {title:'机构用户申请',path:'/profile/apply',name:'apply'},
            ]
        };
    },
    methods:{
        onSwith(item){
           this.$router.push(item.path);
        }
    },
    created() {
        
    },
    
    watch: {
        
    },
    
};
</script>
<style lang="stylus" scoped>
.sidebar
    width 100%
    height 100%
    .sider-bar
        display flex
        align-items center
        justify-content space-between
        width 100%
        height 40px
        padding 0 20px
        cursor pointer
        .title
            padding-left 5px
            color #333
            font-size 16px
        .bar-icon
            flex-shrink 0
            color #333
        &:hover .title,&.active .title,&:hover .bar-icon,&.active .bar-icon
            color #3266CC
            font-weight bolder
    .sider-bar:last-child
        margin-top 8px
        height 50px
        border-top 1px solid #ddd
</style>